<template>
	<div class="content">
		<div class="panel">
			<div class="panel-title"><h3>搜索历史</h3><van-icon name="delete-o" /></div>
			<div class="key-wrap">
				<div class="key-item" @click="searchKey('iPhone 14')"><div class="key-item-bg"/><span>iPhone 14</span></div>
				<div class="key-item" @click="searchKey('自主品牌')"><div class="key-item-bg"/><span>自主品牌</span></div>
				<div class="key-item" @click="searchKey('华为新品')"><div class="key-item-bg"/><span>华为新品</span></div>
				<div class="key-item" @click="searchKey('游戏平板')"><div class="key-item-bg"/><span>游戏平板</span></div>
			</div>
		</div>
		<div class="panel">
			<div class="panel-title"><h3 v-if="!shopId">实时热搜</h3><h3 v-else>热门类目</h3></div>
			<div class="key-wrap">
				<div class="key-item hot" @click="to('https://m.1688.com')"><div class="key-item-bg"/><van-icon name="fire" /> <span>iPhone 14</span></div>
				<div class="key-item" @click="to('https://m.jd.com')"><div class="key-item-bg"/><span>自主品牌</span></div>
				<div class="key-item" @click="to('https://m.taobao.m')"><div class="key-item-bg"/><span>华为新品</span></div>
				<div class="key-item" @click="to('/search/goods')"><div class="key-item-bg"/><span>游戏平板</span></div>
			</div>
		</div>
	</div>
</template>
<style lang="scss" scoped>
.content{
	--van-primary-color:v-bind(themeColor);
	height:calc(100vh - 54px);
	overflow:auto;
	.panel{margin-top:0;}
	.panel-title{
		.van-icon{color:var(--font-second-color);font-size: 16px;}
	}
	.key-item{
		height:28px;padding:0 10px; display:flex; align-items: center; position:relative;border-radius:20px;
		font-size:13px;
		color:var(--font-third-color); margin:0 8px 8px 0;
		&-bg{
			z-index:0;position:absolute; left:0;right:0;bottom:0;height:100%;width:100%;border-radius:20px;
			background-color:var(--bar-input-color);
		}
		.van-icon{font-size:16px; color:var(--van-primary-color);
			height:22px;width:22px; background-color: var(--white-color);text-align:center;line-height:22px;
			border-radius:20px;position: relative; z-index:1; margin-right:4px;
		}
		span{position: relative; z-index:1;}
	}
	.key-item.hot{
		color:var(--van-primary-color);padding-left:3px;
		.key-item-bg{background-color:var(--van-primary-color);opacity:.1}
	}
	.key-wrap{
		margin:0 -8px -8px 0; display:flex; flex-wrap:wrap;
	}
}
</style>
<script lang="ts" setup>
//展现搜索历史、热门关键字的组件，平台搜索、店铺搜索通用
//暂时默认第一个就是加火标志的
//todo:平台、店铺的搜索历史，均暂存在sessionStorage中，可清空；使用历史其中一项后，需调整顺序到最前
//props
const props=defineProps({
	themeColor:{
		type:String,
		default:import.meta.env.VITE_THEME_COLOR,
		required:false,
	},
	shopId:{
		type:String,
		required:false,
	},
})
//data
const searchPage = !props.shopId? inject('searchPage') as any : undefined


//methods
const searchKey=(key:string)=>{
	if(props.shopId){
		replace('/shop/search', { key: key, } )
	}else if(searchPage){
		to(searchPage.value, { key: key, } )
	}else{
		to('/search/goods', { key: key, } )
	}
}
const {to,replace} = useGoto()
</script>